<!-- 世界地图  -->
<template>
  <div id="world-map-chart-main">
    <div ref="worldMapChartContainer" class="world-map-chart-container"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import mapData from './json/world.json';
import countryName from './json/country_es_zh.json';

export default {
  components:{mapData},
  name:"WorldMapChart",
  data(){
    return{
      mapDom: null,
      locale:'en-US'
    }
  },
  methods:{
    radomValue(){
      return Math.round(Math.random()*100);
    },
    setMap(){
      echarts.registerMap("world", mapData);
      //console.log(mapData)
      let dataValue=[];
      if (!!mapData && !!mapData.features && mapData.features.length > 0){
        mapData.features.forEach(item=>{
          //item.properties['chinaName']=countryName[item.properties.name];
          //console.log(item)
          //中文版的国家名改为中文
          if (!!item.id){
            if (this.locale === 'zh-CN'){
              item.properties.name = countryName[item.id];
            }else{
              item.properties.name = item.id;
            }
          }
          dataValue.push({name:item.properties.name,value:this.radomValue()});
        })
      }

      this.showMap(dataValue);
    },
    setMap_back() {
      echarts.registerMap("world", mapData);
      let dataValue=[];
      if (!!mapData && !!mapData.features && mapData.features.length > 0){
        //针对中国地图的省名多语设置
  /*      let center={maxLng:null,minLng:null,maxLat:null,minLat:null};
        let coord=[];
        let i=0;
  */
        console.log("mapData= %o",mapData);
        mapData.features.forEach(item=>{
          //console.log("item.name=%o",item.properties.name)
          //console.log("%o: %o",item.properties.name,countryName[item.properties.name]);
          //中文版的国家名改为中文
          if (this.locale === 'zh-CN'){

            item.properties.name = countryName[item.properties.name];
        }

          //取中心
            //if (i===1){

/*            if (!!item.geometry && item.geometry.coordinates && item.geometry.coordinates.length>0){
              item.geometry.coordinates.forEach(item1=>{
                center.maxLng=null;center.minLng=null;center.maxLat=null;center.minLat=null;
                coord=[]
                item1.forEach(item2=>{
                  //console.log("item2=%o",item2)
                  if (center.maxLng===null || item2[0] > center.maxLng){
                    center.maxLng =item2[0];
                  }
                  if (center.minLng===null || item2[0] < center.minLng){
                    center.minLng =item2[0];
                  }
                  if (center.maxLat===null || item2[1] > center.maxLat){
                    center.maxLat =item2[1];
                  }
                  if (center.minLat===null || item2[1] < center.minLat){
                    center.minLat =item2[1];
                  }
                })
              })
            }
            console.log("center=%o",center);
            coord=[]
            coord.push((center.maxLng+center.minLng)/2);
            coord.push((center.maxLat+center.minLat)/2);
          console.log("coord=%o",coord);
          */
          //}

          //加入各国的数据值
          dataValue.push({name:item.properties.name,value:this.radomValue()});

        })

      }

      this.mapDom = echarts.init(this.$refs.worldMapChartContainer);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
        },
        //产生两张重贴的地图
        geo: {
          map: "world",
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          //center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: false, //关闭省份名展示
              fontSize: "8",
              color: "rgba(0,0,0,0.7)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              //borderColor: "#389dff",
              borderColor: "#053c73",
              borderWidth: 0, //设置外层边框
              shadowBlur: 2,
              shadowOffsetY: 0,
              shadowOffsetX: 0,
              shadowColor: "#01012a"
            },
            emphasis: {
              areaColor: "#184cff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 2,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        textStyle: { color: "#fff" },
        visualMap: {
          type: "piecewise",
          min: 0,
          max: 1000,
          show: false,
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#ccc", "#00D2F4", "#008CFF", "#0041FF", "#00126E"],
          },
          pieces: [
            { min: 0, max: 0 },
            { min: 1, max: 25 },
            { min: 26, max: 50 },
            { min: 51, max: 75 },
            { min: 76, max: 101 },
          ],
        },
        series: [
          {
            name: "world map",
            type: "map",
            map: "world",
            zoom: 1.23,
            label: {
              //太挤了，不显示国家名，show=false太难看，所以使用color: 'transparent' 显示的文字透明的，搞掂
              show: true,
              color: 'transparent',
              /*color: '#fcfdff',*/
              overflow:'truncate',
              ellipsis:'...',
              fontSize: 12,
/*              textStyle: {
                fontSize: 1,
                color: "#fcfdff",
              },*/
            },
            data:dataValue
          },
        ],
      };
      //console.log(">>>>>>>>>> setOption >>>>>>>>>>>>>>>");
      //console.log(">>>>>>>>>> dataValue=%o",dataValue);
      this.mapDom.setOption(option);
      // 监听地图点击事件
/*      this.mapDom.on('click',params=>{
        console.log("this.mapDom: %o",this.mapDom);
        if (!!params.data.center && !!params.data.center[0] && !!!!params.data.center[1]){
          this.mapDom.dispatchAction({
            type: 'dataZoom',
            // 放大的中心点坐标，使用点击位置坐标
            geoIndex: 0, // 指定操作的 geo 组件索引，多个地图时使用
            scale: 4, // 放大倍数，4 倍放大
            center: params.data && params.data.center // 坐标
          });
        }
      })*/

    },
    showMap(dataValue){
      this.mapDom = echarts.init(this.$refs.worldMapChartContainer);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
        },
        //产生两张重贴的地图
        geo: {
          map: "world",
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          //center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: false, //关闭省份名展示
              fontSize: "8",
              color: "rgba(0,0,0,0.7)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              //borderColor: "#389dff",
              borderColor: "#053c73",
              borderWidth: 0, //设置外层边框
              shadowBlur: 2,
              shadowOffsetY: 0,
              shadowOffsetX: 0,
              shadowColor: "#01012a"
            },
            emphasis: {
              areaColor: "#184cff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 2,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        textStyle: { color: "#fff" },
        visualMap: {
          type: "piecewise",
          min: 0,
          max: 1000,
          show: false,
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#ccc", "#00D2F4", "#008CFF", "#0041FF", "#00126E"],
          },
          pieces: [
            { min: 0, max: 0 },
            { min: 1, max: 25 },
            { min: 26, max: 50 },
            { min: 51, max: 75 },
            { min: 76, max: 101 },
          ],
        },
        series: [
          {
            name: "world map",
            type: "map",
            map: "world",
            zoom: 1.23,
            label: {
              //太挤了，不显示国家名，show=false太难看，所以使用color: 'transparent' 显示的文字透明的，搞掂
              show: true,
              color: 'transparent',
              /*color: '#fcfdff',*/
              overflow:'truncate',
              ellipsis:'...',
              fontSize: 12,
              /*              textStyle: {
                              fontSize: 1,
                              color: "#fcfdff",
                            },*/
            },
            data:dataValue
          },
        ],
      };
      this.mapDom.setOption(option);
    }
  },
  mounted() {
    this.locale=this.$store.state.app.local;
    this.setMap();

  }
}
</script>
<style lang="less">
#world-map-chart-main{
  width: 100%;
  height: 100%;
  //background-color: #00ff00;
  display: flex;
  justify-content: center;
  align-items: center;
}

.world-map-chart-container{
  //margin-top: 30px;
  //margin-bottom: 50px;
  width: 90%;
  height: 90%;
  //background-color: #a64bf4;
}
</style>
